<template>
  <el-form-item :class="getClz([])" :label="opt.text" :prop="opt.name" v-if="!opt.hide" >
    <div class="txt" @click="onClick(data)"><i :class="opt.icon"/>{{text()}}</div>
  </el-form-item>
</template>

<script>
    import extend from '../extend';

    export default {
      name: "FormText",
      mixins:[extend],
      dicts:[],
      data(){
        return {
          opt:{
            name:'',
            text:'',
            prop:'',
            icon:'',
            props:{
              type:'text',
              disabled:false
            },
            options:[],
            hide:false,
            placeholder:''
          }
        }
      },
      mounted(){
        this.initOptions();
        this.onClick = this.opt.onClick || this.onClick;
      },
      methods:{
        text(){
          let opt = this.opt;
          let value = this.data[this.opt.name];
          if(opt.options.length){
            let res = [];
            opt.options.forEach((one)=>{
              if(/\,/.test(value) && value.indexOf(one.value)>-1){
                res.push(one.label)
              }else if(value == one.value){
                res.push(one.label)
              }
            })
            return this.onText(res.join(","));
          }else{
            return this.onText(value);
          }
        },
        setValue(val){
          this.data[this.opt.name] = val;
          this.$forceUpdate();
        },
        onText(text){
          let onText = this.opt.onText;
          return onText?onText(this.data,text):text;
        },
        onClick(){

        }
      }
    }
</script>
